<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-3.1.1.min.js" ></script>
		<style>
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.box1{
				width: 600px;
				height: 400px;
				margin: auto;
				position: relative;
			}
			li{
				position: absolute;
				display: none;
			}
			img{
				width: 600px;
				height: 400px;
			}
			span{
				display: inline-block;
				width: 10px;
				height: 10px;
				text-align: center;
				line-height: 20px;
				border-radius: 50%;
				background: white;
			}
			.box2{
				position: absolute;
				top: 330px;
				left: 250px;
			}
			p{
				position: absolute;
			}
			.left{
				width:30px;
				height: 50px;
				background: rgba(0,0,0,0.3);
				color: white;
				top: 160px;
				left: 0;
				font-size: 50px;
				line-height: 50px;
				text-align: center;
			}
			.right{
				width:30px;
				height: 50px;
				background: rgba(0,0,0,0.3);
				color: white;
				top: 160px;
				right: 0;
				font-size: 50px;
				line-height: 50px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<ul>
				<li style="display: block;"><img src="../img/8.jpg"></li>
				<li><img src="../img/3.jpg"></li>
				<li><img src="../img/6.jpg"></li>
				<li><img src="../img/7.jpg"></li>
			</ul>
			<div class="box2">
				<span style="background:red;"></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
			<p class="left"><</p>
			<p class="right">></p>
		</div>
	</body>
	<script>
		var num=0;
		var timer=null;
		
		timer=setInterval(lun,4000)
		$('.box1').hover(function(){
			clearInterval(timer)
		},function(){
			timer=setInterval(lun,4000)
		})
		
		function lun(){
			$('li').eq(num).fadeOut(1000)
			num++;
			if(num>3){
				num=0;
			}
			$('li').eq(num).fadeIn(1000)
			
			$('span').eq(num).css('background','red').siblings().css('background','')
		}
		$('span').click(function(){
			num=$(this).index()
			$('li').eq(num).fadeIn(1000).siblings().fadeOut(1000)
			$(this).css('background','red').siblings().css('background','')
		})
		$('.left').click(function(){
			$('li').eq(num).fadeOut(1000);
			num--;
			if(num<0){
				num=3;
			}
			$('li').eq(num).fadeIn(1000);
			$('span').eq(num).css('background','red').siblings().css('background','')
		})
		$('.right').click(function(){
			lun()
		})
	</script>
</html>
